import moment from 'moment';
import request from '../../../utils/request'
//获取全局的实例
const appInstance = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isPlay: false,//音乐是否播放
    song: {},//歌曲详情对象
    musicId: '',//音乐的id
    musicLink: '',//音乐的链接
    currentTime: '00:00',//实时时间
    durationTime: '00:00',//总时长
    currentWidth: 0,//实时进度团队宽度
    playListSongs: [],//歌曲列表的数据
    index: 0,//歌单下标
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // console.log(options);
    //options:接受路由传参的query参数
    //原生小程序中路由传参，对参数的长度有限制，如果参数长度过长会自动截取掉
    // console.log(JSon.parse(options.song));
    let index = options.index
    this.setData({
      index
    })
    //获取歌单传过来的全部歌曲数据
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.on('acceptDataFromOpenerPage', (data) => {//发布事件
      console.log(data);
      this.setData({
        playListSongs: data,
        //更新此页面的playListSongs数据状态
      })

    });

    // 获取点击的歌曲的下标
    let musicId = this.data.playListSongs[index].id
    this.setData({
      musicId
    })
    //获取歌曲信息
    this.getMusicInfo(musicId)

    /**
     * 问题:如果用户操作系统的控制音乐播放|暂停按钮，页面不知道，导致页面显示的是否播放状态和真是的音乐博凡状态不一致
     *  解决方案：
     *    1.通过控制音频的实例BackgroundAudioManager去监视音乐播放|暂停
     */

    //判断当前页面的音乐是否在播放
    if (appInstance.globalData.isMusicPlay && appInstance.globalData.musicId === musicId) {
      //修改当前页面音乐的播放状态为true
      this.setData({
        isPlay: true
      })
    }

    //创建控制音乐播放的实例
    this.BackgroundAudioManager = wx.getBackgroundAudioManager();
    //监视音乐播放|暂停|停止
    this.BackgroundAudioManager.onPlay(() => {
      this.changePlayState(true);
      //将播放音乐的id存入全局data中
      appInstance.globalData.musicId = musicId;
    });
    this.BackgroundAudioManager.onPause(() => {
      this.changePlayState(false);
    });
    this.BackgroundAudioManager.onStop(() => {
      this.changePlayState(false);
    });
    // 监听音乐播放自然结束
    this.BackgroundAudioManager.onEnded(() => {
      //自动切换至下一首音乐，且自动播放
      //实时进度条的长度还原为0,时间还原为0
      this.setData({
        currentWidth: 0,
        currentTime: '00:00',
        isPlay: false,
      }),
        //关闭当前正在播放的音乐
        this.BackgroundAudioManager.stop();
      let { index, playListSongs } = this.data
      if (index === playListSongs.length - 1) {
        index = -1
      }
      index++
      //更新下标
      this.setData({
        index
      })
      let musicId = playListSongs[index].id
      this.setData({
        musicId
      })
      this.getMusicInfo(musicId)
      this.musicControl(true, musicId)
    });

    //监听音乐实时播放的进度
    this.BackgroundAudioManager.onTimeUpdate(() => {
      // console.log('zsc', this.BackgroundAudioManager.duration);
      // console.log('szc', this.BackgroundAudioManager.currentTime);
      // 使用momentjs格式化音乐的实时播放时间
      let currentTime = moment(this.BackgroundAudioManager.currentTime * 1000).format('mm:ss');
      let currentWidth = this.BackgroundAudioManager.currentTime / this.BackgroundAudioManager.duration * 450;
      this.setData({
        currentTime,
        currentWidth
      })

    })

  },



  //修改播放状态的功能函数
  changePlayState(isPlay) {
    //修改音乐是否播放的状态
    this.setData({
      isPlay
    })
    //将音乐播放状态存入全局data中
    appInstance.globalData.isMusicPlay = isPlay;
  },

  //获取音乐详情的功能函数
  async getMusicInfo(musicId) {
    let songData = await request('/song/detail', { ids: musicId });
    //songData.song[0].dt 单位ms
    // 使用momentjs格式化音乐时长数据
    let durationTime = moment(songData.songs[0].dt).format('mm:ss')
    this.setData({
      song: songData.songs[0],
      durationTime,
    })
    //动态修改窗口的标题
    wx.setNavigationBarTitle({
      title: this.data.song.name
    })
  },

  //点击播放||暂停的回调
  handleMusciPlay() {
    let isPlay = !this.data.isPlay
    //修改播放状态  this.BackgroundAudioManager.onPlay this.BackgroundAudioManager.onPause全局监听事件有了之后这里的播放状态改变就不在需要了
    // this.setData({
    //   isPlay
    // })
    let { musicId, musicLink } = this.data
    console.log(isPlay, musicId, musicLink);
    this.musicControl(isPlay, musicId, musicLink);
  },

  //控制音乐播放||暂停的功能函数
  async musicControl(isPlay, musicId, musicLink) {
    if (isPlay) {//音乐有播放
      if (!musicLink) {
        //获取音乐播放链接
        let musicLinkData = await request('/song/url', { id: musicId })
        musicLink = musicLinkData.data[0].url
        this.setData({
          musicLink
        })
      }
      this.BackgroundAudioManager.src = musicLink;
      this.BackgroundAudioManager.title = this.data.song.name;
    } else {
      //音乐暂停
      this.BackgroundAudioManager.pause();
    }
  },

  //点击切歌的回调
  handleSwitch(event) {
    //关闭当前正在播放的音乐
    this.BackgroundAudioManager.stop();

    //获取切歌的类型
    let type = event.currentTarget.id;
    let { index, playListSongs } = this.data
    if (playListSongs.length < 2) {
      return
    }

    if (type === 'pre') {
      //上一首
      (index === 0) && (index = playListSongs.length)
      index--
    } else {
      //下一首
      // (index === playListSongs.length - 1) && (index = -1)
      // index += 1;
      if (index === playListSongs.length - 1) {
        index = -1
      }
      index++
    }
    //更新下标
    this.setData({
      index
    })
    let musicId = playListSongs[index].id
    this.setData({
      musicId
    })
    this.getMusicInfo(musicId)
    this.musicControl(true, musicId)
  },

  //控制进度条的回调
  changCurrentWidth(event) {
    // console.log(event);
    let currentWidth = (event.detail.x - event.currentTarget.offsetLeft - 28) * 2
    if (currentWidth <= 0) {
      currentWidth = 0;
    }
    console.log(currentWidth);
    let fullPlayTime = this.data.song.dt
    let goToPlayTime = currentWidth / 450 * fullPlayTime
    // console.log(fullPlayTime);
    this.setData({
      currentWidth,
    })
    //跳转到指定位置
    this.BackgroundAudioManager.seek(goToPlayTime * 0.001);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.handleMusciPlay()
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})